import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import JoinRuleDialog from './JoinRuleDialog'
import './groupStyle.less'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: (msg) => dispatch(global.allActions.appActions.openModal(msg))
  }
}
class GroupInfo extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      groupList: [],
      showJoinRule: false
    }
  }

  public componentDidMount() {
    this.queryGroupInfo()
  }

  queryGroupInfo() {
    const params = {
      limit: 500,
      offset: 0,
      uid: this.props.userInfo.uid
    }
    const query = queryString.stringify(params)
    const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/joined?${query}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.log('queryGroupInfo', data)
      const groupList: any = []
      const rulesList = data.data.dataList
      rulesList.forEach(rule => {
        switch (rule.gameType) {
          case 1:
            rule._appendInfo = util.gameUtil.classicBullRules(JSON.parse(rule.jsonContent))
            break
          case 2:
            rule._appendInfo = util.gameUtil.fightBullRules(JSON.parse(rule.jsonContent))
            break
          case 3:
            rule._appendInfo = util.gameUtil.majiangRules(JSON.parse(rule.jsonContent))
            break
          case 5:
            rule._appendInfo = util.gameUtil.dianziBullRules(JSON.parse(rule.jsonContent))
            break
          case 4:
            rule._appendInfo = util.gameUtil.jinhuaRules(JSON.parse(rule.jsonContent))
            break
          case 6:
            rule._appendInfo = util.gameUtil.sangongRules(JSON.parse(rule.jsonContent))
            break
          case 7:
            rule._appendInfo = util.gameUtil.pjchuanRules(JSON.parse(rule.jsonContent))
            break
          case 8:
            rule._appendInfo = util.gameUtil.runRules(JSON.parse(rule.jsonContent), rule.totalTurns)
            break
          case 11:
            rule._appendInfo = util.gameUtil.znRules(JSON.parse(rule.jsonContent))
            break
          default:
            rule._appendInfo = {}
            break
        }
        const groupInfo = groupList.find(group => group.id === rule.crowdInfo.id)
        if (!groupInfo) {
          groupList.push(({ ruleList: [rule], _active: false, ...rule.crowdInfo }))
          return
        }
        groupInfo.ruleList.push(rule)
      })
      console.log('groupList', groupList)
      this.setState({ groupList })
    })
  }

  joinGame(rule) {
    const url = `${config.pre}/crowd/room/${Cookies.get('areaCode')}/${rule.id}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.log(data)
      if (data.result) {
        this.props.openModal('加入玩法失败' + data.message)
        return
      }
      window.location.href = data.data
    })
  }

  toggleGroup(group) {
    group._active = !group._active
    this.setState({ group })
  }

  showDetail(rule) {
    window.location.hash = 'RuleDetail/' + rule.id
  }

  public render() {
    const { userInfo } = this.props
    const { inviteId, tip, groupList, showJoinRule } = this.state
    return <div className="view-page group-view">
      <img src="img/group/group-di.png" className="full pos-abs" alt="" />
      <div className="underbg">
        <div className="group-top text-center">
          <img src="img/group/group-join-btn.png" onClick={() => this.setState({ showJoinRule: true })} className="join-group-btn" alt="" />
        </div>
        <div className="group-middle">
          <img src="img/group/content-di.png" className="pos-abs full" alt="" />
          <div className="underbg scroll-h middle-stone">
            {
              groupList.map((group, index) => {
                const arrowSrc = group._active ? 'img/group/up.png' : 'img/group/down.png'
                return <div key={index} className="group-item clearfix">
                  <img className="full-width" src="img/userCenter/info-kuang1.png" alt="" />
                  <div className="group-item-title">
                    <img className="group-header" src={group.crowdHead ? group.crowdHead : 'img/group/group-default-head.jpg'} alt="群头像" />
                    <div onClick={this.toggleGroup.bind(this, group)} className="service-top-info mlr-6">
                      <div className="mtr-3">{util.maxLength(group.crowdName, 9)}<span className="mlr-10">(俱乐部ID: {group.id})</span></div>
                      <div className="mtr-3">{util.maxLength(group.notice, 15)}</div>
                    </div>
                    <img onClick={this.toggleGroup.bind(this, group)} className="group-arrow" src={arrowSrc} alt=""></img>
                  </div>
                  <ul className="clearfix group-item-row">
                    {
                      group._active ? group.ruleList.map((rule, ruleIndex) => {
                        const appendInfo = rule._appendInfo || {}
                        return <li className="clearfix" key={ruleIndex} onClick={this.showDetail.bind(this, rule)}>
                          <img className="rule-header" src={appendInfo.headUrl} alt="" />
                          <div className="service-top-info mlr-6">
                            <div className="mtr-3">{util.maxLength(rule.confName, 12)}<span className="mlr-10">(玩法ID: {rule.id})</span></div>
                            <div className="mtr-3">{util.maxLength(appendInfo.ruleName, 18)}</div>
                          </div>
                        </li>
                      }) : null
                    }
                  </ul>
                </div>
              })
            }
          </div>
        </div>
        <div className="usercenter-bottom group-info-bottom">
          <img className="bar" src="img/userCenter/info-kuang1.png" alt="" />
          <div className="text"><span>我加入的俱乐部</span></div>
          <NavLink to="/UserCenter"><img className="back" src="img/app/back.png" alt="" /></NavLink>
        </div>
      </div>
      {
        showJoinRule ? <JoinRuleDialog close={() => this.setState({ showJoinRule: false })}></JoinRuleDialog> : null
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(GroupInfo)